﻿var selectedtree=function(){
	var selected = {
			$this : null,
			item_item : {},
			item_chose : {},
			/*
			 * 初始化方法:init(id,items,right_fn,title,now_selected) id:返回对象的id item：左侧树
			 * eg:{text:"tree",value:"0",child:[{value:'1',text:'节点1'},{value:'1',text:'节点2'}]}
			 * right_fn：获取右侧列表方法 eg:function(id){ var ret={value:"id",text:"这是结果"}
			 * alert("这是左侧选中节点的id"); return ret; } title:标题 now_selected：当前选中项
			 * 
			 */
			init : function(title, items, right_fn,  now_selected){
				this.item_item.children=items || [];
				if (this.$this == null) {
					$("body").append(this.html(title, now_selected));
					this.$this = $("body").find(".select-card:last");
					this.mask = mui.createMask(function() {
						$("body").find(".select-card:last").addClass("mui-hidden");
					});
					$t = this;
					this.$this.find(".left").find("ul").on("click", "li", function() {
						$t.leftClick(this);
					});
					this.$this.find(".right").find("ul").on("touchend", "li", function() {
						$t.rightClick(this);
					});
					$(document).on("touchend", "#sub", function() {
						$t.submit();
					});
					$(document).on("touchend", "#req", function() {
						$t.mask.close();
					});
					this.$this.find("#selected-box").on("tap","div",function(){
						$("#"+$(this).attr("val")).find(".chose-active").removeClass("chose-active");
						$(this).remove();
					})
					$(document).on("touchend", "#d_now_select", function() {
						var i = $t.way.length;
						if (i > 0) {
							$t.way.splice(i - 1, 1)
						}
						$t.leftList();
						var val=$t.item_item;
						for (x in $t.way) {
							val = val.children[$t.way[x]];
						}
						$t.putRight(val.value||0);
					});
				} else {
					this.$this.find(".title").find("span").html(title);
				}
				this.leftList(this.item_item);
				if (right_fn != null) this.rightList = right_fn;
				this.$this.find(".left").find("ul").find("li:first").click();
//				alert(this.rightList);
//				this.show();
			},
			mask : null,
			show : function(fn,now_selected) {
				var n =now_selected || [];
				var selected="";
				for (x in n) {
					selected += this.item(n[x].value, n[x].text);
				}
				if(n.length>0)this.$this.find("#selected-box").html(selected);
				this.mask.show();// 显示遮罩
				this.submitfn=fn;
				$(this.$this).removeClass("mui-hidden");
			},
			html : function(title, now_selected) {
				var t = title || "多选选择器";
				var n = now_selected || [];
				var selected = "";
				for (x in n) {
					selected += this.item(n[x].value, n[x].text);
				}
				return "<div class=\"select-card mui-hidden\">"
						+ "<div class=\"top\">"
						+ "<div class='title'>"
						+"<a id='req' type=\"button\" class=\"mui-btn mui-btn-danger\">取消</a><span>"
						+ title
						+"</span><a id='sub' type=\"button\" class=\"mui-btn mui-btn-primary\">确定</a>"
						+ "</div>"
						+ "<div id='selected-box' class=\"selected-box\">"
						+ selected
						+ "</div>"
						+ "</div>"
						+ "<div class=\"body\">"
						+ "<div class=\"now_select\" id='d_now_select'>root</div>"
						+ "<div class=\"left\"><ul class=\"mui-table-view\"></ul></div>"
						+ "<div class=\"right\"><ul class=\"mui-table-view\"></ul></div>"
						+ "</div></div>";
			},
			item : function(value, text) {
				return "<div class='selected' val='" + value + "'>" + text + "</div>"
			},
			liItem : function(value, text) {
				return "<li class=\"mui-table-view-cell\" id='" + n[x].value
						+ "'><a class=\"mui-navigate-right\">" + n[x].text
						+ "</a></li>";
			},
			leftList : function() {
				var val = this.item_item;
				if(this.way.length>0){
					for (x in this.way) {
						val = val.children[this.way[x]];
					}
					this.$this.find(".now_select").html(val.text || "root")
				}else{
					this.$this.find(".now_select").html("<img style='height:24px;margin-top:10px;' src=''>");
				}
				var n = val.children || [];
				var ret = "";
				for (x in n) {
					ret += "<li class=\"mui-table-view-cell\" id='" + n[x].value
							+ "'><a class=\"mui-navigate-right\">" + n[x].text
							+ "</a></li>";
				}
				this.$this.find(".left").find("ul").html(ret);
			},
			rightList : function(id) {
				var ret = [ {
					value : "",
					text : "无"
				} ];
				return ret;
			},
			putRight : function(id) {
				var h = "";
				this.$this.find(".right").find("ul").html("<li class=\"mui-table-view-cell\"><a class=\"mui-navigate-right\">无</a></li>");
				var l = this.rightList(id);
				if(l!=null&&l.length>0){
					for (x in l) {
						
						h += "<li class=\"mui-table-view-cell\" id='" + l[x].value
								+ "'><a class=\"mui-navigate-right "+is_chose+"\">" + l[x].text
								+ "</a></li>";
					}
					this.$this.find(".right").find("ul").html(h);
				}else{
//					h += "<li class=\"mui-table-view-cell\"><a class=\"mui-navigate-right\">无</a></li>";
				} 
			},
			pushRight : function(l) {
				var h = "";
				this.$this.find(".right").find("ul").html("<li class=\"mui-table-view-cell\"><a class=\"mui-navigate-right\">加载中...</a></li>");
				if(l!=null&&l.length>0){
					for (x in l) {
						var is_chose="";
						this.$this.find("#selected-box").find("div[val='"+l[x].value+"']").each(function(){
							is_chose="chose-active";
						});
						h += "<li class=\"mui-table-view-cell\" id='" + l[x].value
								+ "'><a class=\"mui-navigate-right "+is_chose+"\">" + l[x].text
								+ "</a></li>";
					}
				}else{
					h += "<li class=\"mui-table-view-cell\"><a class=\"mui-navigate-right\">无</a></li>";
				} 
				this.$this.find(".right").find("ul").html(h);
			},
			leftClick : function(obj) {
				var id = $(obj).parent().find("li").index(obj);
				this.putRight($(obj).attr("id"));
				this.way.push(id);
				this.leftList();
			},
			rightClick : function(obj) {
				if($(obj).attr("id")!=null&&$(obj).attr("id")!=""&&this.$this.find("#selected-box").find("div[val='"+$(obj).attr("id")+"']").length==0){
					$(obj).find("a").addClass("chose-active");
					this.$this.find("#selected-box").append(this.item($(obj).attr("id"),$(obj).text()));
				}else{
					$(obj).find("a").removeClass("chose-active");
					this.$this.find("#selected-box").find("div[val='"+$(obj).attr("id")+"']").remove();
				}
			},
			way : [],
			submitfn:null,
			submit:function(fn){
				var ret=[];
				this.$this.find("#selected-box").find("div").each(function(){
					ret.push({value:$(this).attr("val"),text:$(this).text()});
				})
				
				this.mask.close();
				this.submitfn(ret);
			}
		};
	return selected;
}
﻿